<template>
  <a-card title="微应用管理">
    <template #extra><a href="#" @click="addMicroAppAdd">新增</a></template>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="false"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'childProps'">
          {{ JSON.stringify(record.childProps, 4, 4) }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-tooltip title="编辑">
            <EditOutlined @click="editMicroApp(record)" />
            <a-divider type="vertical" />
          </a-tooltip>

          <a-tooltip title="删除">
            <DeleteOutlined @click="delMicroApp(record)" />
          </a-tooltip>
        </template>
      </template>
    </a-table>

    <a-modal
      v-model:open="open"
      :title="formState.id ? '编辑' : '新增'"
      width="70%"
      :footer="null"
    >
      <a-form
        :model="formState"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        :rules="rules"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="id" name="id" v-show="formState.id">
          <a-input v-model:value="formState.id" disabled />
        </a-form-item>
        <a-form-item label="应用name" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>

        <a-form-item label="应用code" name="code">
          <a-input v-model:value="formState.code" />
        </a-form-item>
        <a-form-item label="应用entry" name="entry">
          <a-input v-model:value="formState.entry" />
        </a-form-item>
        <a-form-item label="应用activeRule" name="activeRule">
          <a-input v-model:value="formState.activeRule" />
        </a-form-item>
        <a-form-item label="应用参数" name="childProps">
          <a-input v-model:value="formState.childProps" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
          <a-button type="primary" html-type="submit">添加</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  microAppList,
  microAppAdd,
  microAppEdit,
  microAppDel,
} from "@/api/microApp";
import { message } from "ant-design-vue";
import {
  EditOutlined,
  DeleteOutlined,
  MenuUnfoldOutlined,
} from "@ant-design/icons-vue";
const router = useRouter();
const dataSource = ref([]);

const open = ref(false);

// 表单
const formState = ref({
  id: null,
  name: "",
  code: "",
  entry: "",
  activeRule: "",
  childProps: '{"chidldProps":""}',
});

const rules = {
  name: [
    {
      required: true,
      message: "请输入应用name",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入应用code",
      trigger: "blur",
    },
  ],
  entry: [
    {
      required: true,
      message: "请输入应用entry",
      trigger: "blur",
    },
  ],
  activeRule: [
    {
      required: true,
      message: "请输入应用activeRule",
      trigger: "blur",
    },
  ],
  childProps: [
    {
      required: true,
      message: "请输入应用childProps",
      trigger: "blur",
    },
  ],
};
const columns = reactive([
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "code",
    dataIndex: "code",
    key: "code",
  },
  {
    title: "入口",
    dataIndex: "entry",
    key: "entry",
  },
  {
    title: "命中路由",
    dataIndex: "activeRule",
    key: "activeRule",
  },
  {
    title: "子应用参数",
    dataIndex: "childProps",
    key: "childProps",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
  },
]);

/**
 * 获取微应用列表
 */
const getMicroAppList = async () => {
  const { success, msg, data } = await microAppList();
  if (success) {
    dataSource.value = data.rows || [];
  } else {
    message.error(msg);
  }
};

/**
 * 编辑微应用
 */
const editMicroApp = (data) => {
  open.value = true;
  formState.value = { ...data, childProps: JSON.stringify(data.childProps) };
};
/**
 * 新增微应用
 */
const addMicroAppAdd = () => {
  open.value = true;
  formState.value = {
    id: null,
    name: "",
    code: "",
    entry: "",
    activeRule: "",
    childProps: '{"chidldProps":""}',
  };
};

/**
 * @description: 添加微应用
 * @param {*} data
 * @return {*}
 */
const addMicroAppAddDetail = async (data) => {
  let childProps = {};
  try {
    childProps = JSON.parse(data.childProps);
  } catch (error) {
    childProps = {};
    message.error("子应用参数格式错误");
    return;
  }

  const { success, msg } = data.id
    ? await microAppEdit({
        ...data,
        childProps: childProps,
      })
    : await microAppAdd({
        ...data,
        childProps: childProps,
      });
  if (success) {
    message.success(msg);
    open.value = false;
    getMicroAppList();
  } else {
    message.error(msg);
  }
};
/**
 * @description: 提交表单
 * @param {*} values
 * @return {*}
 */
const onFinish = (values) => {
  console.log("Success:", values);
  addMicroAppAddDetail(values);
};

/**
 * @description: 提交失败
 * @param {*} errorInfo
 * @return {*}
 */
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

/**
 * @description: 删除微应用
 */
const delMicroApp = async (data) => {
  const { success, msg } = await microAppDel({
    id: data.id,
  });
  if (success) {
    message.success(msg);
    getMicroAppList();
  } else {
    message.error(msg);
  }
};

/**
 * @description: 路由列表编辑
 */
const routerEditHandel = (data) => {
  console.log(data);
  router.push({
    path: "/microAppRouter",
    query: {
      id: data.id,
    },
  });
};

onMounted(() => {
  getMicroAppList();
});
</script>
<style lang='scss' scoped>
</style>